<!-- 11.02 答题 -->
<template>
	<view>
		<view class="">
			<view v-for="(item,index) in valueData" :key="index" class="basicf">
				<view class="fbottom">
					{{item.question}}
				</view>
				<view class="aradio" @click="chanef(items,item,indexs)" v-for="(items,indexs) in item.answer"
					:key="indexs">
					<view class="dana">
						{{items.option}}.{{items.text}}
					</view>
					<view class="r" :class="items.value ? 'activer' : 'r'"></view>
				</view>
			</view>
			<view v-if="isanser == 0" class="befbutton" @click="submit">
				<button class="fbutton bgbut">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				valueData: [],
				sudata: [],
				pid: 0,
				asort: [1, 1, 1],
				isanser: 0
			}
		},
		onLoad() {
			this.getitle()
		},
		methods: {
			getitle() {
				this.$request({
					url: this.$api.question.problem
				}).then(res => {
					this.pid = res.data.id
					this.valueData = res.data.params
					this.isanser = res.isanser
					if (this.isanser != 0) {
						uni.showModal({
							title: '今日已答题',
							content: '今日问题已回答，金币已赠送'
						})
					}
					this.valueData.map((item, index) => {
						item.answer[0].value = true
					})
					this.sudata = [{
							"qid": this.pid,
							"qanswer": 'A',
							"sort": 1,
						},
						{
							"qid": this.pid,
							"qanswer": 'A',
							"sort": 2,
						},
						{
							"qid": this.pid,
							"qanswer": 'A',
							"sort": 3,
						}
					]
				})
			},
			chanef(item, cdata, index) {
				if (item.sort == this.asort[cdata.sort - 1]) {
					return
				}
				item.value = true
				cdata.answer.map((m, n) => {
					if (n != index) {
						m.value = false
					} else {
						m.value = true
					}
				})
				this.sudata[cdata.sort - 1].sort = cdata.sort
				this.asort[cdata.sort - 1] = item.sort
				this.sudata[cdata.sort - 1].qanswer = item.option
				this.$forceUpdate()
			},
			submit() {
				// console.log(this.sudata);
				// console.log(JSON.stringify(this.sudata));
				let adata = JSON.stringify(this.sudata)
				this.$request({
					url: this.$api.question.answer,
					method: 'POST',
					data: {
						answer: adata
					}
				}).then(res => {
					if (res.code == 0) {
						this.isanser = 1
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						// uni.showModal({
						// 	title: '提交成功',
						// 	content: '仅每天首次提交赠送金币，重复操作没有奖励哦'
						// })
					} else {
						this.isanser = 0
						if (res.msg) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: '提交失败',
								icon: 'none'
							})
						}
					}
				}).catch(() => {
					uni.showToast({
						title: '提交失败',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.basicf {
		padding: 36rpx 0;
		width: 686rpx;
		background-color: #FFFFFF;
		margin: 32rpx auto;
		border-radius: 32rpx;
	}

	.fbottom {
		width: 550rpx;
		margin: 0 auto;
		padding: 24rpx 0 0;
		line-height: 48rpx;
		border-bottom: 2rpx solid #F2F2F2;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: 600;
	}

	.aradio {
		width: 550rpx;
		// height: 50rpx;
		margin: 0 auto;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: justify;
		word-break: break-all;
		line-height: 48rpx;
	}

	.dana {
		flex: 1;
		margin-right: 24rpx;
	}

	.r {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid #CDCDCD;
		border-radius: 50%;
	}

	.activer {
		background: #ff2200;
		border: none;
	}

	.befbutton {
		background: #342B2A;
		border-radius: 64rpx;
		width: 686rpx;
		height: 88rpx;
		margin: 48rpx auto;
		overflow: hidden;
	}

	.fbutton {
		border-radius: 64rpx;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-weight: bold;
		font-size: 36rpx;
	}

	.bsbut {
		color: #FFFFFF;
		background: #CD9C62;
	}

	.bgbut {
		background: #342B2A;
		color: #FFFFFF;
	}

	.bcbut {
		border: 1rpx solid #342B2A;
		color: #342B2A;
	}
</style>
